<template>
  <div class="insert-player">
    <!--    <button>InsertPlayer</button>-->
    <!--    环绕标签Ctrl+Alt+r-->
    <el-button type="success" @click="visibility = !visibility">新增</el-button>
    <!--    <el-button type="success">{{ title }}</el-button>-->
    <!--    <slot></slot>-->
    <!--    <el-button type="danger" @click="go">{{ abc }}</el-button>-->
    <!--    <el-form :model="player" ref="playerForm">-->
    <!--      <el-form-item prop="nickname">-->
    <!--        <el-input v-model="player.nickname"></el-input>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item prop="goldCoin">-->
    <!--        <el-input v-model="player.goldCoin"></el-input>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <!--    <el-button @click="submit">提交</el-button>-->
    <!--    <el-button @click="$refs.playerForm.resetFields()">重置</el-button>-->
    <!--    <el-form>标签中的model和 <el-form-item>标签中的prop配合使用，使得重置生效-->
    <!-- <el-dialog :visible.sync="visibility">中的visible.sync可以关闭窗口-->
    <el-dialog :visible.sync="visibility">
      <el-form
        ref="player"
        :model="player"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <el-form-item prop="usernameFk" label="学号：">
          <el-input v-model.number="player.usernameFk"> </el-input>
        </el-form-item>
        <!--      字段不能为空，20开头的十位数字-->
        <el-form-item prop="nickname" label="昵称：">
          <el-input v-model.trim="player.nickname"> </el-input>
        </el-form-item>
        <el-form-item prop="goldCoin" label="金币数量：">
          <el-input v-model.number="player.goldCoin"> </el-input>
        </el-form-item>
        <el-form-item prop="silverCoin" label="银币数量：">
          <el-input v-model.number="player.silverCoin"> </el-input>
        </el-form-item>
        <el-form-item prop="profession" label="职业：">
          <el-select v-model="player.profession">
            <!--          <el-option value="" label="作家"></el-option>-->
            <!--          <el-option value="" label="建筑师"></el-option>-->
            <!--          <el-option value="" label="巫师"></el-option>-->
            <el-option
              v-for="e in $store.state.professionTypes"
              :key="e.index"
              :label="e.text"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="submitplayer()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.player.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "InsertPlayer",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "list",
    },
    abc: String,
  },
  data() {
    return {
      sampleD: "value",
      player: {
        usernameFk: "2018020055",
        nickname: "马钰雯",
        goldCoin: null,
        silverCoin: null,
        profession: "writer",
        playerCode: "",
        playerId: 0,
        version: 0,
      },
      visibility: false,
      rules: {
        usernameFk: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          //20 18255555 2{1}0{1}[0-9]{8} 次数是一可以省略掉  2{1}0{1}[0-9]{8}
          //先确定取值范围再确定个数,取值个数是一个的话可以省略,[]取值范围{}取值个数
          {
            pattern: /^20[0-9]{8}&/,
            message: "取值范围必须以20开头的十位数字",
            trigger: "blur",
          },
        ],
        //要求goldCoin必须是大于10小于90的整数
        goldCoin: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          { validator: this.valiGoidCoin, trigger: "blur" },
        ],
        silverCoin: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          { validator: this.SilverCoin, trigger: "blur" },
        ],
      },
      // rules: {
      //   usernameFk: [
      //     //必须输入内容，失去焦点时触发
      //           { required: true, message: "请输入账号", trigger: "blur" },
      //     //正则表达式
      //           {
      //             pattern: /^\w+$/,
      //             message: "请输入字母/数字/下划线",
      //             trigger: ["blur", "change"],
      //           },
      //     //自定义一个验证函数
      //           { validator: this.validateItem, trigger: "blur" },
      //         ],
      //         password: [{ required: true, message: "请输入密码", trigger: "change" }],
      //       },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    // go() {
    //   this.$message.warning("发布订阅模式");
    //   this.$emit("onSumbit", 10);
    //   this.$notify.success("哈哈");
    // },
    submitplayer() {
      this.$message.success(JSON.stringify(this.player));
      //this.$refs.player.validate(callback:())
      // document.getElementById("player").validate;
      // document.getElementByref();
      //refs是一个数组
      // this.$refs['player'];
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              if (res.data.playerId) {
                //自动关闭新增窗口
                this.visibility = false;
                //子组件调用父组件的方式
                //this.$parent.queryByCondition
                //发布订阅的方式
                //相当于运行了一个postSubmit方法，实际上运行了父组件的queryByCondition
                //使得新增的玩家在提交后调用queryByCondition方法使得新增的玩家在列表中显示
                this.$emit("postSubmit");
              }
            },
            (error) => {
              console.log(" request error : " + error.response.status);
            }
          );
        } else {
          this.$message.error("验证不通过请重新填写表单");
        }
      });
    },
    submit() {
      this.$message.success(JSON.stringify(this.player));
    },
    valiGoidCoin(rule, value, callback) {
      //value
      // callback 在所有分支都必须运行，区别在于是否有error参数
      //当前的value，和value的类型
      //value表示你输入的数值
      console.log(value, typeof value);
      if (isNaN(value)) {
        return callback(new Error("数值必须在10到90之间"));
      }
      if (value > 90 || value < 10) {
        return callback(new Error("goldCion必须在10-90之间"));
      }
      return callback;
      // let isExits = true
      // if (isExits) {
      //         callback(new Error('用户名已经存在'))
      //     } else {
      //         callback()
      // }
    },
    SliverGoidCoin(rule, value, callback) {
      console.log(value, typeof value);
      if (isNaN(value)) {
        return callback(new Error("数值必须在10到90之间"));
      }
      if (value > 90 || value < 10) {
        return callback(new Error("silverCion必须在10-90之间"));
      }
      return callback;
    },
    // valiGoidCoin(){
    //
    // },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  //width: ;
}
.insert-player {
}
</style>
